import QtQuick 2.0

Rectangle {

    color: "transparent"
    width: 200
    height: 200

    property int r: 70
    property int rM: 70
    property bool bClicked: false

    signal sigIndex(int index)
    signal sigActivated(bool b)


    Rectangle {
        id: btnMain
        width: rM
        height: rM
        radius: rM/2
        color: "lightgreen"
        border.width: 3
        border.color: "green"
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.bottomMargin: -5
        anchors.rightMargin: -5
        z: 10


        Image {
            id: im
            source: "qrc:/imgs/plus.png"
            anchors.fill: parent
        }

        MouseArea {
            anchors.fill: parent
            onPressed: {parent.scale = 0.9}
            onReleased: {
                parent.scale = 1.0
                if (bClicked)
                {
                    aniWorkingIn.start()
                    bClicked = false
                }
                else
                {
                    bClicked = true
                    aniWorkingOut.start()
                }
                sigActivated(bClicked)
            }
        }
    }


    Rectangle {
        id: btnWorking
        width: 50
        height: 50
        radius: 25
        color: "#FF7F24"
        border.width: 1
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        z: 2

        Behavior on scale { PropertyAnimation { duration: 200}}

        Text {
            color: "white"
            text: qsTr("运行")
            font.bold: true
            font.pixelSize: 16
            anchors.centerIn: parent
        }

        MouseArea {
            anchors.fill: parent
            onPressed: {parent.scale = 0.8}
            onReleased: {
                parent.scale = 1.0;
                sigIndex(2);
                aniWorkingIn.start();
                bClicked=!bClicked;
                sigActivated(bClicked);
            }
        }
    }

    Rectangle {
        id: btnSetting
        width: 50
        height: 50
        radius: 25
        border.width: 1
        color: "#FF7F24"
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        z: 2

        Behavior on scale { PropertyAnimation { duration: 200}}

        Text {
            color: "white"
            text: qsTr("设置")
            font.bold: true
            font.pixelSize: 16
            anchors.centerIn: parent
        }

        MouseArea {
            anchors.fill: parent
            onPressed: {parent.scale = 0.8}
            onReleased: {
                parent.scale = 1.0;
                sigIndex(1);
                aniWorkingIn.start();
                bClicked=!bClicked;
                sigActivated(bClicked);
            }
        }
    }

    Rectangle {
        id: btnStatistics
        width: 50
        height: 50
        radius: 25
        border.width: 1
        color: "#FF7F24"
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        z: 2

        Behavior on scale { PropertyAnimation { duration: 200}}

        Text {
            color: "white"
            text: qsTr("统计")
            font.bold: true
            font.pixelSize: 16
            anchors.centerIn: parent
        }

        MouseArea {
            anchors.fill: parent
            onPressed: {parent.scale = 0.8}
            onReleased: {
                parent.scale = 1.0;
                sigIndex(0);
                aniWorkingIn.start();
                bClicked=!bClicked;
                sigActivated(bClicked);
            }
        }
    }




    ParallelAnimation {
        id: aniWorkingOut

        PropertyAnimation {
            target: im
            property: "rotation"
            from: 0
            to: 180
            duration: 300
        }

        PropertyAnimation {
            target: btnWorking
            property: "anchors.bottomMargin"
            from: 0
            to: r
            duration: 300
            easing.type: Easing.InOutQuad
        }

        PropertyAnimation {
            target: btnWorking
            property: "anchors.rightMargin"
            from: 0
            to: 0
            duration: 300
            easing.type: Easing.InOutQuad
        }

        PropertyAnimation {
            target: btnSetting
            property: "anchors.bottomMargin"
            from: 0
            to: r*Math.cos(Math.PI/4)
            duration: 300
            easing.type: Easing.InOutQuad
        }

        PropertyAnimation {
            target: btnSetting
            property: "anchors.rightMargin"
            from: 0
            to: r*Math.sin(Math.PI/4)
            duration: 300
            easing.type: Easing.InOutQuad
        }


        PropertyAnimation {
            target: btnStatistics
            property: "anchors.bottomMargin"
            from: 0
            to: r*Math.cos(Math.PI/2)
            duration: 300
            easing.type: Easing.InOutQuad
        }

        PropertyAnimation {
            target: btnStatistics
            property: "anchors.rightMargin"
            from: 0
            to: r*Math.sin(Math.PI/2)
            duration: 300
            easing.type: Easing.InOutQuad
        }
    }



    ParallelAnimation {
        id: aniWorkingIn

        PropertyAnimation {
            target: im
            property: "rotation"
            from: 0
            to: -180
            duration: 300
        }

        PropertyAnimation {
            target: btnWorking
            property: "anchors.bottomMargin"
            to: 0
            duration: 300
            easing.type: Easing.InOutQuad
        }

        PropertyAnimation {
            target: btnWorking
            property: "anchors.rightMargin"
            to: 0
            duration: 300
            easing.type: Easing.InOutQuad
        }

        PropertyAnimation {
            target: btnSetting
            property: "anchors.bottomMargin"
            to: 0
            duration: 300
            easing.type: Easing.InOutQuad
        }

        PropertyAnimation {
            target: btnSetting
            property: "anchors.rightMargin"
            to: 0
            duration: 300
            easing.type: Easing.InOutQuad
        }


        PropertyAnimation {
            target: btnStatistics
            property: "anchors.bottomMargin"
            to: 0
            duration: 300
            easing.type: Easing.InOutQuad
        }

        PropertyAnimation {
            target: btnStatistics
            property: "anchors.rightMargin"
            to: 0
            duration: 300
            easing.type: Easing.InOutQuad
        }
    }
}
